<!-- @format -->

<script setup>
	defineProps({
		// 接收一个名为 width 的属性，类型是 Number

		// 简易写法：只对 props 添加类型约束
		// width: Number

		width: {
			type: Number, // 类型约束
			default: 50, // 默认值
			required: true, // 要求必填
			// required和default不会同时出现，如果都有，required优先级更高
			// 自定义校验函数：当前面的type/required将其约束不住的时候
			validator(value) {
				// 在这个函数中可以编写任意自定义校验逻辑

				// value: 实际给 props 传递的数据
				if (value < 0 || value > 100) {
					console.error('width props value must between 0 and 100')
					// 不通过，必须返回false
					return false
				}
				// 通过了，必须返回true
				return true
			}
		}
	})
</script>

<template>
	<div class="my-progress">
		<div
			class="inner"
			:style="{ width: width + '%' }">
			<span>{{ width }}%</span>
		</div>
	</div>
</template>

<style scoped>
	.my-progress {
		height: 26px;
		width: 400px;
		border-radius: 15px;
		background-color: #272425;
		border: 3px solid #272425;
		box-sizing: border-box;
		margin-bottom: 30px;
	}
	.inner {
		position: relative;
		background: #379bff;
		border-radius: 15px;
		height: 25px;
		box-sizing: border-box;
		left: -3px;
		top: -2px;
	}
	.inner span {
		position: absolute;
		right: -30px;
		top: 26px;
	}
</style>
